<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>博客</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
    <link rel="stylesheet" href="../res/static/css/index.css">
</head>
<body>
<!-- 侧边内容 -->
<div class="sidebar-content">
    <div class="layui-card">
        <div class="layui-card-header">
            <img src="../res/static/img/portrait.jpg" alt=""><br/>
            <span>小明</span>
        </div>
        <div class="layui-card-body">
            <ul>
                <li class="txt">
                    <span>1000</span><br/>
                    <span>文章</span>
                </li>
                <li class="item">
                    <span>50</span><br/>
                    <span>项目</span>
                </li>
                <li class="visitors">
                    <span>5008</span><br/>
                    <span>访问人数</span>
                </li>
            </ul>
        </div>
    </div>
    <ul class="layui-nav">
        <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
        <li class="layui-nav-item  layui-this"><a href="article.html">文章<br/>ARTICLE</a></li>
        <li class="layui-nav-item"><a href="mood.html">微语<br/>MOOD</a></li>
        <li class="layui-nav-item"><a href="works.html">作品<br/>WORKS</a></li>
        <li class="layui-nav-item"><a href="message.html">留言<br/>MESSAGE</a></li>
        <li class="layui-nav-item last"><a href="about.html">关于<br/>ABOUT</a></li>
    </ul>
</div>


<!-- 右侧内容区域 -->
<div class="article-right-content">
    <h3>推荐文章</h3>
    <ul>
        <li>
            <button class="layui-btn layui-bg-red"
            ">Chrome DevTools</button></li>
        <li>
            <button class="layui-btn layui-bg-orange">css</button>
        </li>
        <li>
            <button class="layui-btn">const</button>
        </li>
        <li>
            <button class="layui-btn layui-bg-cyan">React</button>
        </li>
        <li>
            <button class="layui-btn layui-bg-blue">招聘</button>
        </li>
        <li>
            <button class="layui-btn">Flexbox</button>
        </li>
        <li>
            <button class="layui-btn">xue.js</button>
        </li>
        <li>
            <button class="layui-btn">React</button>
        </li>
        <li>
            <button class="layui-btn">招聘</button>
        </li>
        <li>
            <button class="layui-btn layui-bg-red"
            ">Chrome DevTools</button></li>
        <li>
            <button class="layui-btn layui-bg-orange">css</button>
        </li>
        <li>
            <button class="layui-btn">const</button>
        </li>
        <li>
            <button class="layui-btn layui-bg-cyan">React</button>
        </li>
        <li>
            <button class="layui-btn layui-bg-blue">招聘</button>
        </li>
        <li>
            <button class="layui-btn">Flexbox</button>
        </li>
        <li>
            <button class="layui-btn">xue.js</button>
        </li>
        <li>
            <button class="layui-btn">React</button>
        </li>
        <li>
            <button class="layui-btn">招聘</button>
        </li>
    </ul>
</div>


<!-- 主要内容 -->
<div class="main article">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">专业文章</li>
            <li>前端开发</li>
            <li>随机散文</li>
        </ul>
        <div class="layui-tab-content"></div>
    </div>
    <div class="item">
        <img src="../res/static/img/book.jpg" alt="">
        <div class="item-content">
            <h3>学好JS,走哪儿都不怕</h3>
            <span class="Subtitle">html</span><br/>

            <p>对于想学习Javascript的读者来说, 很可能已经掌握了HTML和Web页面设计的基本知识,希望为页面添加一些更好的互动性,或者,目前是在使用其他语言进行编程,想了解一下JavaScript能够提供哪些更多的功能供哪些更多的功能</p>
            <a href="article-detail.html" onclick="javascript:window.open(this.href)">
                <button class="layui-btn">阅读全文</button>
            </a>
        </div>
        <div class="date-box">
            <div class="date">
                <h4>29</h4>
                <span>2018/06</span>
            </div>
        </div>
    </div>
    <div class="item">
        <img src="../res/static/img/book.jpg" alt="">
        <div class="item-content">
            <h3>学好JS,走哪儿都不怕</h3>
            <span class="Subtitle">html</span><br/>

            <p>对于想学习Javascript的读者来说, 很可能已经掌握了HTML和Web页面设计的基本知识,希望为页面添加一些更好的互动性,或者,目前是在使用其他语言进行编程,想了解一下JavaScript能够提供哪些更多的功能供哪些更多的功能</p>
            <a href="article-detail.html" onclick="javascript:window.open(this.href)">
                <button class="layui-btn">阅读全文</button>
            </a>
        </div>
        <div class="date-box">
            <div class="date">
                <h4>29</h4>
                <span>2018/06</span>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="item-content">
            <h3>学好JS,走哪儿都不怕</h3>
            <span class="Subtitle">html</span><br/>

            <p>对于想学习Javascript的读者来说, 很可能已经掌握了HTML和Web页面设计的基本知识,希望为页面添加一些更好的互动性,或者,目前是在使用其他语言进行编程,想了解一下JavaScript能够提供哪些更多的功能供哪些更多的功能</p>
            <a href="article-detail.html" onclick="javascript:window.open(this.href)">
                <button class="layui-btn">阅读全文</button>
            </a>
        </div>
        <div class="date-box">
            <div class="date">
                <h4>29</h4>
                <span>2018/06</span>
            </div>
        </div>
    </div>
    <div id="demo1"></div>
</div>


<!-- 搜索框 -->
<div class="seach">
    <form class="layui-form seach-box" action="">
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn"><i class="layui-icon layui-icon-search"></i></button>
                <input type="text" name="username" lay-verify="required" placeholder="搜索相关" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</div>


<script src="../res/layui/layui.js"></script>
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
    layui.config({
        base: '../res/static/js/'
    }).use('layBlog');
</script>
</body>
</html>